<!-- 侦听器:watch -->
<!-- 2. 主要使用方式
● 使用 watch 监听一个响应式数据
● 使用 watch 监听多个响应式数据
● 使用 watch 监听响应式对象数据中的一个属性(简单)
● 使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听
● 使用 watch 监听，配置默认执行 -->
<script setup lang="ts">
import { ref, watch } from 'vue'

// 监听一个响应式数据
const num = ref(0)
watch(num, () => {
  console.log('num 改变啦')
})

// 监听多个响应式数据
const num2 = ref(0)
watch([num, num2], () => {
  console.log('多个数据改变拉')
})

//监听对象中的一个属性
const food = ref({
  name: '烤串',
  price: 100,
  drink: {
    name: '元气森林',
    price: 20,
  },
})
//写法: watch(()=>数据, 改变后回调函数)
watch(
  () => food.value.name,
  () => {
    console.log('food.name 改变啦')
  },
)
//监听对象中的复杂类型->需要配置深度监听
//参数1:设置监听的数据/属性
// 参数2:数据改变后的回调函数
// 参数3:默认配置,如深度监听
watch(
  () => food.value.drink,
  () => {
    console.log('food.drink 改变啦')
  },
  // deep: true:开启深度监听
  // immediate: true:开启默认执行
  { deep: true, immediate: true },
)
</script>

<template>
  <h2 @click="num++">我是单个响应式数据: {{ num }}</h2>
  <h2 @click="num2++">我是第二个响应式数据:{{ num2 }}</h2>
  <h2>我是对象{{ food }}</h2>
  <button @click="food.name = '烤鱼'">点我改变食物姓名</button>
  <button @click="food.drink.name += '酒'">点我改变饮料中的名称</button>
  <button @click="food.drink.price++">点我改变饮料中的价格</button>
</template>

<style></style>
